<template>
    <div class="app-container">
        <el-row v-loading="listLoading">
            <el-col :span="24">
                <el-form
                    class="dialog-form"
                    :rules="formRules"
                    ref="dataForm"
                    :model="formData"
                    label-position="left"
                    label-width="140px"
                >
                    <el-form-item label="开启推荐有礼活动" prop="status">
                        <el-radio v-model="formData.status" :label="1">开启</el-radio>
                        <el-radio v-model="formData.status" :label="0">关闭</el-radio>
                    </el-form-item>
                    <el-form-item label="奖品类型" prop="awardType">
                        <el-radio v-model="formData.awardType" :label="1">积分</el-radio>
                        <el-radio v-model="formData.awardType" :label="2">电子券</el-radio>
                    </el-form-item>
                    <el-form-item label="电子券号" prop="ecticketCodes" v-if="formData.awardType==2">
                        <el-input
                            type="textarea"
                            :rows="5"
                            v-model="formData.ecticketCodes"
                            maxlength="50"
                            placeholder="请输入电子券号,逗号隔开,如123,456"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="奖励积分设置" prop="awardPointsNum" v-if="formData.awardType==1">

                        <el-input-number
                            v-model="formData.awardPointsNum"
                            min="0"
                            placeholder="请输入奖励积分设置"
                        ></el-input-number>&nbsp;&nbsp;
                        (推荐新会员奖励的积分数量)
                    </el-form-item>
                    <el-form-item label="奖励次数设置" prop="awardDailyCount">
                        <el-input-number
                            v-model="formData.awardDailyCount"
                            min="0"
                            placeholder="请输入奖励次数设置"
                        ></el-input-number>
                        &nbsp;
                        (会员每天推荐新会员最高可获得的奖励次数，0表示没限制)
                    </el-form-item>
                </el-form>
                <div class="btn-area">
                    <el-button type="primary" :loading="isSubmiting" @click="handleSubmitForm">确定</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      formRules: {
        status: [
          {
            required: true,
            message: '请选择是否开启活动'
          }
        ],
        awardType: [
          {
            required: true,
            message: '请选择奖品类型'
          }
        ],
        ecticketCodes: [
          {
            required: true,
            message: '请输入电子券号'
          }
        ],
        awardPointsNum: [
          {
            required: true,
            message: '请输入奖励积分设置'
          }
        ],
        awardDailyCount: [
          {
            required: true,
            message: '请输入奖励次数设置'
          }
        ]
      },
      formData: {},
      isSubmiting: false,
      isFormDialogShowed: false,
      isCurrentUserLevelShowed: false,
      dataList: [],
      dataTotal: 0,
      isEditing: false,
      tableHeight: 300
    }
  },
  created () {
    this.tableHeight = window.innerHeight - 300
    this.loadData()
  },
  methods: {
    handleRemove (row) {
      this.confirm('确认删除该记录吗').then(_ => {
        this.$post('/admin/recommend_setting/remove', { id: row.id }).then(
          _ => {
            this.success()
            this.loadData()
          }
        )
      })
    },
    handleAdd () {
      this.isFormDialogShowed = true
      this.formData = {}
      this.isEditing = false
    },
    handleViewNote (row) {
      this.formData = row
      this.isCurrentUserLevelShowed = true
    },
    handleAvatarSuccess (imgField) {
      return (res, file) => {
        if (res && res.errcode == 0) {
          this.formData[imgField] = res.info
        }
      }
    },
    handleEdit (row) {
      this.isFormDialogShowed = true
      this.isEditing = true
      this.formData = Object.assign({}, row)
    },
    handleCurrentChange (pageNo) {
      this.queryParams.pageNo = pageNo
      this.loadData()
    },
    handleSizeChange (pageSize) {
      this.queryParams.pageSize = pageSize
      this.loadData()
    },
    handleSubmitForm () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.isSubmiting = true
          this.$post(
            '/admin/recommend_setting/update',
            this.formData
          )
            .then(() => {
              this.loadData()
              this.$$notify()
            })
            .finally(() => {
              this.isSubmiting = false
            })
        }
      })
    },
    loadData () {
      this.listLoading = true
      this.$get('/admin/recommend_setting/detail')
        .then(data => {
          this.formData = data || {}
        })
        .finally(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

  <style scoped lang="scss">
.title {
  text-align: center;
  padding: 0 0 20px 0;
  font-size: 20px;
}

.content {
  line-height: 2;
}
.btn-area {
  padding-left: 180px;
  padding-top: 10px;
}
</style>
